@import './variable.less';

.nav-cq {
  .full-screen();
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .nav-tab {
    background: white;
    padding: 0 50/@ppr;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .hairline(bottom, rgb(232, 234, 238));
    .btn-hover();
    .tab-cell {
      flex: 1;
      text-align: center;
      padding: 36/@ppr 0;

      .cell-title{
        display: inline-block;
        font-size: 34/@ppr;
        line-height: 40/@ppr;
        color: #5c5c5c;
        position: relative;
      }

      &.active {
        .cell-title {
          color: #2e2e36;
          font-size: 40/@ppr;
          font-weight: bold;

          &:before{
            content: ' ';
            position: absolute;
            bottom: -9/@ppr;
            left: 0;
            right: 0;
            margin: 0 12/@ppr;
            height: 4/@ppr;
            background-color: #ff6655;
            border-radius: 4/@ppr;
            box-sizing: border-box;
          }
        }
      }
    }
    .tab-user-center {
      width: 128/@ppr;
      height: 42/@ppr;
      border-radius: 8/@ppr;
      .directional-gradient(rgb(255, 86, 84), rgb(255, 142, 77));
      line-height: 42/@ppr;
      text-align: center;
      font-size: 24/@ppr;

      color: white;
      &.active {
        .directional-gradient(rgb(246, 171, 0), rgb(253, 196, 68));
        .shawdow(rgba(246, 171, 0, 0.49), 90deg, 3px, 0, 5px);
        box-shadow: @shawdow;
      }
    }
  }
  .app-container {
    flex: 1;
    position: relative;
  }
}
